<!-- 文章展示卡片 -->
<template>
  <!--列表形式展示文章   不使用表格-->
  <div style="width: 96%">
    <el-row :gutter="24">
      <el-col :span="1" style="border: 1px solid transparent"></el-col>
      <el-col :span="22" style="background-color: rgba(66,185,131,0);">
        <!--文章列表-->
        <div  v-for="(textInfo,index) in  articleInfoData"
              :key="index"
              style="width: 100%;height: 150px;background-color: #ffffff;
              border: 1px solid rgb(190,202,213);
              margin: 1px;border-radius: 8px;cursor: pointer">
          <!--标题-->
          <div style="text-align: left;height: 20px;margin-left: 5px;font-weight: bold;
              font-size: 18px;" @click="openQuillReadPage(textInfo.articleId)">
            <span>标题:{{textInfo.title}}</span>
          </div>
          <!--内容预览-->
          <div style="text-align: left;height: 100px;width: 100%;
                        background-color: #ffffff;margin-top: 3px;
                        overflow: hidden;text-overflow: ellipsis" @click="openQuillReadPage(textInfo.articleId)">
            <!--<span>{{ textInfo.content }}</span>-->
            <template v-if="textInfo.content==='' || textInfo.content===null">
              <span>
                <span style="color: #999999;font-size: 12px;padding: 10px">
                  该文章内容为空,两日后系统将自动删除
                </span>
              </span>
            </template>
            <template v-else>
              <!--鼠标悬浮文本内容-->
              <el-tooltip effect="dark" content="点击查看全文" placement="top-start">
                <span style="color: #999999;font-size: 12px;padding: 10px">
                  <div v-html="textInfo.content"></div>
                </span>
              </el-tooltip>

            </template>
          </div>
          <!--其他-->
          <div style="text-align: right;height: 10px">
            <el-tag size="mini" type="success">点赞量{{textInfo.likes}}</el-tag>
            <!--<i v-if="true" class="el-icon-star-on"></i>-->

            <el-tag size="mini" type="danger">收藏量{{textInfo.collections}}</el-tag>
            <!--<i v-if="true" class="el-icon-star-on"></i>-->
            <el-button type="text" size="mini" @click="deleteText(textInfo)">
              <i class="el-icon-delete" style="color: red">删除</i>
            </el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="1" style="border: 1px solid transparent"></el-col>
    </el-row>
  </div>
</template>

<script>
import {delete_articleInfoInfo} from "@/api/articleInfo";

export default {
  props: ['articleInfoData'],
  name: "ArticleListCard",
  data() {
    return {
      deletingId_articleInfo: null
    }
  },
  mounted() {
    // console.log('文章数据',this.articleInfoData)
  },
  methods: {
    /**
     * 打开富文本阅读页面
     * @param articleId
     */
    openQuillReadPage(articleId) {
      this.$router.push({
        path: '/index/read-text',
        query: {
          articleId: articleId
        }
      })
    },
    // 单个删除确认框
    deleteText(row) {
      this.deletingId_articleInfo = row.articleId;
      this.$confirm('确定要删除编号为' + row.title + '的信息吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
        // 执行删除
        this.deleteData_articleInfo(this.deletingId_articleInfo)
      }).catch(() => {
      });
    },
    //删除一个
    deleteData_articleInfo(deletingId) {
      delete_articleInfoInfo(deletingId).then((res) => {
        this.$message.success("删除成功")
        // 刷新浏览器页面
        this.$router.go(0)
      }).catch((err) => {
        console.log(err)
      })
    },
  }
}
</script>

<style scoped>

</style>